<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS轮播图</title>
    <style>
        *{
            margin:0;
            padding:0;
            user-select: none;
        }

        #container{
            width:650px;
            height:430px;
            margin:100px auto 0;
            box-shadow: 0px 0px 10px 5px #6c6c6c;

            /* 定位样式 */
            position: relative;
        }

        /* 图片容器 */
        .img{
            width:650px;
            height:430px;
            position: absolute;
            left:0;
            top:0;
            opacity: 0;
            transition: all linear .1s;
        }

        /* 让图片显示出来 */
        #container .img.active{
            opacity: 1;
        }

        .img img{
            width:100%;
            height:100%;
        }

        #left,#right{
            height:430px;
            line-height:430px;
            width:100px;
            text-align: center;
            font-size:100px;
            font-weight: bold;
            color: pink;
            cursor: pointer;
            position: absolute;
            top:0;
            background:rgba(0, 0, 0, .8);
            opacity: 0;

            /* 过渡 */
            transition:all linear .1s;
        }

        #left{
            left:0;
        }

        #right{
            right:0;
        }

        /* 移入到父元素的时候显示出按钮 */
        #container:hover #left, #container:hover #right{
            opacity: .5;
        }

        #container #left:hover,#container #right:hover{
            opacity: 1;
        }

        /* 更多元素 */
        #more{
            width:100%;
            position: absolute;
            left:0;
            bottom:5px;
            text-align: center;
        }

        #more span{
            width:20px;
            height:20px;
            display: inline-block;
            background:black;
            border-radius: 100px;
            margin-right:10px;
            cursor: pointer;

            /* 过渡效果 */
            transition: all linear .1s;
        }

        #more span.active{
            background:rgb(255, 0, 93);
        }

        #more span:hover{
            background:rgb(255, 0, 93);
        }
    </style>
</head>
<body>
    <!-- 最外层的容器标签 -->
    <div id="container">
        <div class="img"><img src="./images/1.jpg" /></div>
        <div class="img"><img src="./images/2.jpg" /></div>
        <div class="img"><img src="./images/3.jpg" /></div>
        <div class="img"><img src="./images/4.jpg" /></div>

        <!-- 左右按钮 -->
        <div id="left">&lt;</div>
        <div id="right">&gt;</div>

        <!-- 指示器点.. -->
        <div id="more"></div>
    </div>
</body>
</html>
<!-- 动态加载第三方操作库 -->
<script src="./jquery.min.js"></script>

<script>
    // 定义一个全局的显示的定位信息,让第1张图片显示
    var index = 0

    // 定义一个定时器变量
    var timer;

    // 根据图片的数量动态去追加小圆点的元素
    // console.log($(".img").length)
    $(".img").each(function(key, item){
        if(key == index)
        {
            $("#more").append("<span class='active'></span>") //让...默认显示添加样式
            $(this).addClass("active")  //给当前元素添加一个class名称
        }else
        {
            $("#more").append("<span></span>")
        }
        
    })

    // 点击左边按钮绑定事件
    $("#left").click(function(){
        //判断当前的位置信息
        if(index <= 0)
        {
            //回滚到最后一张图片 索引是从0开始的
            index = $(".img").length - 1
        }else
        {
            // 没有滚动到第一位，--往前移动
            index--;
        }

        // 改变图片的显示 addClass 添加class名称 
        // 给当前的元素添加一个class，让其余的兄弟去掉class名称
        $(".img").eq(index).addClass("active").siblings().removeClass("active")
        $("#more span").eq(index).addClass("active").siblings().removeClass("active")
    })

    // 给右边的按钮绑定点击事件
    $("#right").click(function(){
        // 判断当前的位置是否有到达边界
        // $(".img").length - 1 为什么要 -1  索引是从0开始的  4-1=3 3是最后一张图片的索引
        if(index >= $(".img").length - 1)
        {
            index = 0 //如果等于3就说明是最后一张 回滚到第一张
        }else
        {
            //走到else这里说明没有到达最后一张
            index++;
        }

        // 改变图片的显示 addClass 添加class名称 
        // 给当前的元素添加一个class，让其余的兄弟去掉class名称
        $(".img").eq(index).addClass("active").siblings().removeClass("active")
        $("#more span").eq(index).addClass("active").siblings().removeClass("active")
    })


    //给指示器也要绑定点击事件
    $("#more span").click(function(){
        // $(this).index() 返回当前元素的所在第几位 默认从0开始

        // 修改一下全局位置
        index = $(this).index()

        // 改变图片的显示 addClass 添加class名称 
        // 给当前的元素添加一个class，让其余的兄弟去掉class名称
        $(".img").eq(index).addClass("active").siblings().removeClass("active")
        $("#more span").eq(index).addClass("active").siblings().removeClass("active")
    })


    // 定时器自动运行
    function autoplay()
    {
        if(index >= $(".img").length - 1)
        {
            index = 0 //如果等于3就说明是最后一张 回滚到第一张
        }else
        {
            //走到else这里说明没有到达最后一张
            index++;
        }

        // 改变图片的显示 addClass 添加class名称 
        // 给当前的元素添加一个class，让其余的兄弟去掉class名称
        $(".img").eq(index).addClass("active").siblings().removeClass("active")
        $("#more span").eq(index).addClass("active").siblings().removeClass("active")
    }

    // 设置循环定时器
    timer = setInterval(autoplay, 1000)

    // 移入停止定时器，移出重新运行定时器
    $("#container").mouseover(function(){
        //清除定时器
        clearInterval(timer)
    })

    //移出，重新设置定时器
    $("#container").mouseout(function(){
        // 重新设置定时器
        timer = setInterval(autoplay, 1000)
    })

    // 移入移出可以合并在一起写
    // $("#container").hover(移入函数, 移出函数)
    // $("#container").hover(
    //     function(){
    //         //清除定时器
    //         clearInterval(timer)
    //     },
    //     function(){
    //         // 重新设置定时器
    //         timer = setInterval(autoplay, 1000)
    //     }
    // )


    // 调用函数
    // autoplay()


</script>